<template>
  <v-app 
    id="login" 
    class="primary">
    <v-content>
      <v-container 
        fluid 
        fill-height>
        <v-layout justify-center>
          <v-flex
            offset-lg6
            xs12 
            sm6 
            md4 
            lg4>
            <v-card 
              class="login-card elevation-1 pa-3" 
              max-width="400">
              <v-card-text>
                <div class="layout column align-center">
                  <img 
                    src="/img/vuetify.png" 
                    alt="logo" 
                    width="80" 
                    height="80">
                  <h2 class="flex primary--text">趣创益</h2>
                </div>                
                <v-form ref="form">
                  <v-text-field 
                    v-model="model.username" 
                    :rules="usernameRules" 
                    name="login"
                    label="邮箱"
                    type="text"/>
                  <v-text-field 
                    v-model="model.password" 
                    :rules="passwordRules" 
                    name="password" 
                    label="设置密码"
                    type="password"/>
                  <v-text-field 
                    v-model="model.repassword" 
                    :rules="repasswordRules" 
                    name="password" 
                    label="确认密码"
                    type="password"/>
                </v-form>
              </v-card-text>
              <v-card-actions>
                <v-btn 
                  :loading="loading" 
                  block 
                  color="primary" 
                  @click="regisiter">注册</v-btn>
              </v-card-actions>
            </v-card>
          </v-flex>
        </v-layout>
      </v-container>
    </v-content>
  </v-app>
</template>

<script>
import Jsencrypt from 'jsencrypt'
import { isEmail, isPassword } from '@/utils/tool'
export default {
  layout: 'login',
  data: () => ({
    loading: false,
    model: {
      username: '191524221@qq.com',
      password: 'password',
      repassword: 'password'
    }
  }),
  computed: {
    usernameRules() {
      return [
        v => !!v || '请输入邮箱',
        v => isEmail(v) || '请输入正确格式的邮箱'
      ]
    },
    passwordRules() {
      return [
        v => !!v || '请设置密码',
        v => isPassword(v) || '密码必须是最少8位，包含大写字母，小写字母和数字'
      ]
    },
    repasswordRules() {
      let vm = this
      return [
        v => !!v || '请再次确认密码',
        v => vm.model.password === vm.model.repassword || '两次密码不一致'
      ]
    }
  },
  methods: {
    async regisiter() {
      if (this.$refs.form.validate()) {
        let { username, password } = this.model
        this.loading = true
        let publicKey
        try {
          let res = await this.$axios.get('/api/common/token')
          publicKey = res.data
          this.loading = false
        } catch (error) {}
        let encrypt = new Jsencrypt()
        encrypt.setPublicKey(publicKey)
        password = encrypt.encrypt(password)
        try {
          let res = await this.$axios.put('/api/user/regisiter', {
            username,
            password
          })
          console.log(res)
        } catch (error) {
          this.$createSnackbar({
            text: error.message,
            type: 'error'
          }).show()
        } finally {
          this.loading = false
        }
      }
    }
  }
}
</script>
<style scoped lang="stylus">
  #login 
    height: 50%;
    width: 100%;
    position: absolute;
    top: 56px;
    left: 0;
    content: "";
    z-index: 0;
  .login-card
    margin: 15vh auto 0;
</style>
